import { observer } from 'mobx-react-lite';
import MyPopup from 'src/components/MyPopup/MyPopup';
import styles from './LogisticsPopup.module.less';
import { logisticsStore } from './logisticsStore';


// 物流信息弹窗
const LogisticsPopup = observer(() => {
    const { logisticsInfo, isLogisticsPopupVisible, hideLogisticsPopup } = logisticsStore;

    return (
        <MyPopup
            open={isLogisticsPopupVisible}
            onClose={hideLogisticsPopup}
            title="物流信息"
            hasHeader
            closeable
        >
            <div className={styles.logisticsContainer}>
                {logisticsInfo.length > 0 ? (
                    logisticsInfo.map((item, index) => (
                        <div key={index} className={styles.logisticsItem}>
                            <div className={styles.time}>{item.time}</div>
                            <div className={styles.context}>{item.context}</div>
                        </div>
                    ))
                ) : (
                    <div className={styles.empty}>暂无物流信息</div>
                )}
            </div>
        </MyPopup>
    );
});

export default LogisticsPopup;